<!DOCTYPE html>
<html lang="en">
<head>
	<title>测量记录</title>
	<link rel="stylesheet" type="text/css" href="/static/css/measurement/selfTest.css" />
	<%- include('../../_global/baseLibs') %>
	<script type="text/javascript" src="/static/lib/util.js"></script>
	<script type="text/javascript" src="/static/lib/touchslider.js"></script>
	<style type="text/css">
		.bottom_btn{
			text-align: center;
			height: 40px;
			font-size: 13px;
			font-weight: 400;
			color: #8f8f94;
		}
	</style>
</head>

<body>
<div>
	<section class="page-wrap page-index">
		<!-- header start -->
		<header id="header" class="header-box grey fixed header-box">
			<div class="header-content">
				<div class="left-tool">
					<a class="back" href="javascript:void(0);"><i class="iconfont icon-back"></i></a>
				</div>
				<div class="title">测量记录</div>
			</div>
		</header>
		<!-- header end -->
		<!--自测记录-start-->
		<div class="find_nav">
			<div class="find_nav_list" id="pagenavi1">
				<ul>
					<li cllx="01">
						<a href="javascript:void(0)">血糖</a>
					</li>
					<li cllx="02">
						<a href="javascript:void(0)">血压</a>
					</li>
					<li cllx="03">
						<a href="javascript:void(0)">血氧</a>
					</li>
					<li cllx="04">
						<a href="javascript:void(0)">BMI</a>
					</li>
					<li cllx="05">
						<a href="javascript:void(0)">腰臀比</a>
					</li>
					<li class="sideline"></li>
				</ul>
			</div>
		</div>

		<div class="news-list-box" style='background:#f5f7fc;' id="slider1">
			<ul>
				<!-- 血糖情况 -->
				<li class='list' id='sugerRecords'>
					<div class='scroll_target'>
						<div class='title'>
							<span>控制目标</span>
						</div>
						<div class='text'>
							<div class='item'>
								<p class='top'>餐前血糖</p>
								<p class='value'>4.4~7.0 mmol/L</p>
							</div>
							<div class='line'></div>
							<div class='item'>
								<p class='top'>餐后/凌晨/睡前/随机测量</p>
								<p class='value'>4.4~10.0 mmol/L</p>
							</div>
						</div>
					</div>

				</li>

				<!-- 血压记录 -->
				<li class='list' id="preRecords">
					<div class='scroll_target'>
						<div class='title'>
							<span>正常范围</span>
						</div>
						<div class='text'>
							<div class='presure item'>
								<p class='top'>收缩压</p>
								<p class='value'>90~140</p>
								<p class='value'>mmHg</p>
							</div>
							<div class='line'></div>
							<div class='presure item'>
								<p class='top'>舒张压</p>
								<p class='value'>60~90</p>
								<p class='value'>mmHg</p>
							</div>
							<div class='line'></div>
							<div class='presure item'>
								<p class='top'>心率</p>
								<p class='value'>60~100</p>
								<p class='value'>mmHg</p>
							</div>
						</div>
					</div>

				</li>

				<!-- 血氧记录 -->
				<li class='list' id="oxygenRecords">
					<div class='scroll_target'>
						<div class='title'>
							<span>正常范围</span>
						</div>
						<div class='text'>
							<div class='oxygen'>
								<span class='top'>血氧饱和度(SaO2)</span><span class='value'>≥95%</span>
							</div>
						</div>
					</div>

				</li>

				<!-- BMI记录 -->
				<li class='list' id="BMIRecords">
					<div class='scroll_target'>
						<div class='title'>
							<span>正常范围</span>
						</div>
						<div class='text'>
							<div class='bmi_item'>
								<p class='top'>偏瘦</p>
								<p class='redvalue'><18.5</p>
							</div>
							<div class='bmi_item'>
								<p class='top'>正常</p>
								<p class='value'>18.5~23.9</p>
							</div>
							<div class='bmi_item'>
								<p class='top'>偏旁</p>
								<p class='redvalue'>24~27.9</p>
							</div>
							<div class='bmi_item'>
								<p class='top'>肥胖</p>
								<p class='redvalue'>≥28</p>
							</div>
						</div>
					</div>


				</li>

				<!-- 腰臀比记录 -->
				<li class='list' id="WHRRecords">
					<div class='scroll_target'>
						<div class='title'>
							<span>正常范围</span>
						</div>
						<div class='text'>
							<div class='item'>
								<p class='top'>男性</p>
								<p class='value'>≤0.9</p>
							</div>
							<div class='line'></div>
							<div class='item'>
								<p class='top'>女性</p>
								<p class='value'>≤0.8</p>
							</div>
						</div>
					</div>
				</li>
			</ul>

		</div>
	</section>
</div>
<script>

    function handler01(){
        var item = $($("#item_view").html());
        item.find('.left').text("血糖");
        var sjd = this['sjd'];
        var dict = $.JkcsZydmUtils.getDict({
            tableName: "tzcl_sjd"
            ,keyValue: false
        });
        var sjd_text = "（" + dict[sjd] + "）";
        item.find('.center').text(sjd_text);
        var value = this['xt'];
        item.find('.right').text(value+'mmol/L');
        return item;
    }
    function handler02(){
        var item = $($("#item_view").html());
        item.find('.left').text("血压");
        var sjd = this['sjd'];
        var dict = $.JkcsZydmUtils.getDict({
            tableName: "tzcl_sjd"
            ,keyValue: false
        });
        var sjd_text = "（" + dict[sjd] + "）";
        item.find('.center').text(sjd_text);
        var ssy = this['ssy'];
        var szy = this['szy'];
        item.find('.right').text(ssy + '/' + szy +'mmHg');
        var item_xl = $($("#item_xl").html());
        item_xl.find(".right").text(this['xl'] + "次/分钟");
        return [item, item_xl];
    }
    function handler03(){
        var item = $($("#item_view").html());
        item.find('.left').text("血氧");
        var value = this['xy'];
        item.find('.right').text(value +'%');
        return item;
    }
    function handler04(){
        var item = $($("#item_view").html());
        item.find('.left').text("BMI");
        var sg = this['sg'];
        var tz = this['tz'];
        item.find('.center').text('身高:'+sg+'cm 体重:'+tz+'kg');
        var bmifl = tz / ((sg / 100.0) * (sg / 100.0));
        var bmi = bmifl.toFixed(1);
        item.find('.right').text(bmi);
        return item;
    }
    function handler05(){
        var item = $($("#item_view").html());
        item.find('.left').text("腰臀比");
        var yw = this['yw'];
        var tw = this['tw'];
        item.find('.center').text('腰围:'+yw+'cm 臀围:'+tw+'cm');
        var whrfl = yw / tw;
        var whr = whrfl.toFixed(2);
        item.find('.right').text(whr);
        return item;
    }
    var page_recordsMobile = (function($, page_recordsMobile) {

        var uri_service_query_list = '/api/gzd/tzcl/queryList';

        function liClickHandler() {
            var index = $(this).index();
            var content_li = $("#slider1 ul li").eq(index);
            content_li.show().siblings().hide();
            var query = $(this).attr("query");
            if("0" == query){
                var cllx = $(this).attr("cllx");
                page_recordsMobile.queryList(cllx, content_li);
            }
            $(this).attr("query", "1");
        }

        function queryList(cllx, content_li){
            $.QuickRemote.AjaxJson({
                funcName: uri_service_query_list
                ,params: {cllx: cllx}
                ,callback: page_recordsMobile.queryListHandler
                ,additionParams: {
                    content_li: content_li
                    ,cllx: cllx
                }
            });
        }

        function queryListHandler(result, params){
            var content_li = params['content_li'];
            var cllx = params['cllx'];
            $.each(result, function(index, item){
                var item_time = page_recordsMobile.creatTime(item['clsj']);
                content_li.append(item_time);
                var func = eval('handler' + cllx);
                if($.isFunction(func)){
                    var item_view = func.apply(item);
                    content_li.append(item_view);
                }
            })
        }


        function creatTime(time){
            var item = $($("#item_time").html());
            item.find('span').text(time);
            return item;
        }

        var cfg_def = {
            liClickHandler: liClickHandler,
            queryList: queryList,
            queryListHandler: queryListHandler,
            creatTime: creatTime,
        }

        page_recordsMobile.init = function(cfg){
            $.extend(page_recordsMobile, cfg_def, cfg);

            var nav_w=$(".find_nav_list li").first().width();
            $(".sideline").width(nav_w);
            $(".find_nav_list li").on('click', function(){
                nav_w=$(this).width();
                $(".sideline").stop(true);
                $(".sideline").animate({left:$(this).position().left},300);
                $(".sideline").animate({width:nav_w});
                $(this).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
                var fn_w = ($(".find_nav").width() - nav_w) / 2;
                var fnl_l;
                var fnl_x = parseInt($(this).position().left);
                if (fnl_x <= fn_w) {
                    fnl_l = 0;
                } else if (fn_w - fnl_x <= flb_w - fl_w) {
                    fnl_l = flb_w - fl_w;
                } else {
                    fnl_l = fn_w - fnl_x;
                }
                $(".find_nav_list").animate({
                    "left" : fnl_l
                }, 300);

            });
            var fl_w=$(".find_nav_list").width();
            var flb_w=$(".find_nav_left").width();
            $(".find_nav_list").on('touchstart', function (e) {
                var touch1 = e.originalEvent.targetTouches[0];
                x1 = touch1.pageX;
                y1 = touch1.pageY;
                ty_left = parseInt($(this).css("left"));
            });
            $(".find_nav_list").on('touchmove', function (e) {
                var touch2 = e.originalEvent.targetTouches[0];
                var x2 = touch2.pageX;
                var y2 = touch2.pageY;
                if(ty_left + x2 - x1>=0){
                    $(this).css("left", 0);
                }else if(ty_left + x2 - x1<=flb_w-fl_w){
                    $(this).css("left", flb_w-fl_w);
                }else{
                    $(this).css("left", ty_left + x2 - x1);
                }
                if(Math.abs(y2-y1)>0){
                    e.preventDefault();
                }
            });

            $("#slider1 ul li").hide();//初始化隐藏所有列表
            $("#pagenavi1 ul li").on("click", page_recordsMobile.liClickHandler);
            $("#pagenavi1 ul li").attr("query", "0");
            var cllx = $.QuickUrlUtils.getRequest("cllx");
            if(StringUtils.isEmpty(cllx)){
                cllx = '01';
            }
            $("#pagenavi1 ul li[cllx='" + cllx + "']").trigger('click');

        }

        return page_recordsMobile;
    })(jQuery, {});



</script>
</body>
<script type="text/html" id="item_time">
	<div class="time"><span></span></div>
</script>
<script type="text/html" id="item_view">
	<div class="news-a">
		<div class="record_edite">
			<img src="/static/images/edit.png" />
		</div>
		<div class="text">
			<span class="left"></span>
			<span class="center"></span>
			<span class="right"></span>
		</div>
		<!-- <div class="record_back">
			<img src="/static/images/back.png" />
		</div> -->
	</div>
</script>
<script type="text/html" id="item_xl">
    <a class="news-a">
        <div class="record_edite"></div>
        <div class="text">
			<span class="left">心率</span>
			<span class="center"></span>
			<span class="right"></span>
		</div>
    	<div class="record_back">
        	<img src="/static/images/back.png" />
        </div>
	</a>
</script>
</html>